<template>
	<div class="icons">
		
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page, index) of pages" :key="index">
					<div
					 class="icon" 
					 v-for="item of page" 
					 :key="item.id"
					 >
						<div class="icon-img">
							<img class="icon-img-content" :src="item.imgUrl" >
							<p class="icon-desc">{{item.desc}}</p>
						</div>
					</div>
					<!-- <div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div> -->
				
			</swiper-slide>
			<!-- <swiper-slide>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
					<div class="icon">
						<div class="icon-img">
							<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" >
							<p class="icon-desc">热门景点</p>
						</div>
					</div>
				
			</swiper-slide>
			 -->
		</swiper>				
	</div>
</template>

<script>
	export default{
		name: 'HomeIcons',
		props: {
			list: Array
		},
		data() {
			return {
				swiperOption: {				//停止自动滚动
					autoplay:false
				}
			}
		},
		computed: {					//计算属性
			pages () {				//定义一个pages数据
				const pages = []	//定义一个pages的数组	
				this.list.forEach((item, index) =>{			//对iconList的每项数据进行循环，循环有两个参数，一个是具体的循环项，一个是循环项对应的下标
					const page = Math.floor(index / 8)			//当前下表的数据应该展示在轮播图的第几页
					if(!pages[page])  {			//如果pages数组没有page这个下标
						pages[page] = []		//让pages数组的page下标等于一个空数组
					}
					pages[page].push(item)		//把pages数组下面的page下标传入 刚刚循环下标大于等于8的数据
				})
				return pages			//把数据返回输出
			}
		}
	}
</script>

<style scoped>
	.icons{
		height: 0;
		padding-bottom: 50%;
		overflow: hidden;
	}
	.icon{
		width: 25%;
		float: left;
		padding-bottom: 25%;
		overflow: hidden;
		position: relative;
		height: 0;
	}
	.icon-img{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: .44rem;
		padding: .1rem;
		box-sizing: border-box;
	}
	.icon-img-content{
		height: 100%;
		display: block;
		margin: 0 auto;
	}
	.icon-desc{
		position: absolute;
		left: 0;
		right: 0;
		bottom: -.44rem;
		line-height: .44rem;
		height: .44rem;
		color: #333;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>